<script type="text/javascript">

var raidId = <?=$this->raidId?>;


function refreshCharacters()  
{
	$.post(	"<?= $this->url(array('controller'=>'characters', 'action'=>'get-characters')) ?>",
   			{ "raidId" : raidId },
         	function(response) { 
         		if (response.status != 200) {
					alert(response.message);
				}
         		displayCharacters(response.data);
         	},
	       	'json');
}

function displayCharacters(characters)
{
	$.each( characters, function(i, character) {
		var container = $.create("div",{"id":"character_"+character.id},character.name + " " + character.class_name);
		//put class symbol to the left, where mouseover gives class name
		
		container.appendTo($("#container_characters"));
	});
}


function refreshRaidInfo()  
{
	$.post(	"<?= $this->url(array('controller'=>'raids', 'action'=>'get-raid-info')) ?>",
   			{ "raidId" : raidId },
         	function(response) { 
         		if (response.status != 200) {
					alert(response.message);
				}
         		displayRaidInfo(response.data);
         	},
	       	'json');
}

function displayRaidInfo(raid)
{
	var raidLeader = $.create("p", {"id":"raid_leader"});
	$.create("strong",{"id":"raid_leader_title"},"Raid Leader: ").appendTo(raidLeader);
	$.create("strong",{"id":"raid_leader_content"},raid.raidleader_name).appendTo(raidLeader);
	
	var startTime = $.create("p", {"id":"start_time"});
	$.create("strong",{"id":"start_time_title"},"Start Time: ").appendTo(startTime);
	$.create("strong",{"id":"start_time_content"},raid.start_time).appendTo(startTime);
	
	var finishTime = $.create("p", {"id":"finish_time"});
	$.create("strong",{"id":"finish_time_title"},"Finish Time: ").appendTo(finishTime);
	$.create("strong",{"id":"finish_time_content"},raid.finish_time).appendTo(finishTime);
	
	var signupDeadline = $.create("p", {"id":"signup_deadline"});
	$.create("strong",{"id":"signup_deadline_title"},"Sign-up Deadline: ").appendTo(signupDeadline);
	$.create("strong",{"id":"signup_deadline_content"},raid.signup_deadline).appendTo(signupDeadline);
	
	var dungeons = $.create("p", {"id":"dungeons"});
	$.create("strong",{"id":"dungeons_title"},"Dungeons: ").appendTo(dungeons);
	var dungeonsList = $.create("UL",{"id":"dungeons_list"}).appendTo(dungeons);
	
	$.each( raid.dungeons, function(i, dungeon) {
		$.create("LI",{},dungeon.name).appendTo(dungeons).appendTo(dungeonsList);
	});

	raidLeader.appendTo($("#container_raid_information"));
	startTime.appendTo($("#container_raid_information"));
	finishTime.appendTo($("#container_raid_information"));
	signupDeadline.appendTo($("#container_raid_information"));
	dungeons.appendTo($("#container_raid_information"));
}

$(document).ready( function() {
	refreshRaidInfo();
	refreshCharacters() 
});

</script>



<div class="content-left">
	<h1><?= $this->img("/images/icons/INV_Bijou_Gold.jpg") ?>Characters</h1>
	<div id="container_characters"></div>
</div>

<div class="content-right">
	<h1><?= $this->img("/images/icons/INV_Bijou_Gold.jpg") ?> Raid information</h1>
	<div id="container_raid_information">
	</div>
</div>

<div class="content-full">
	<h1><?= $this->img("/images/icons/INV_Bijou_Gold.jpg") ?> Raid</h1>
	<div id="container_raid_signups"></div>
</div>